import { defineComponent, reactive, ref } from 'vue'
import HelloWorld from './components/HelloWorld'

function renderHelloWorld(num: number) {
  return <HelloWorld age={num} />
}

export default defineComponent({
  setup() {
    const state = reactive({
      name: 'saintpeters',
    })
    const numberRef = ref(1)
    return () => {
      const number = numberRef.value
      return (
        <div id="app-tsx">
          <div>{number}</div>
          <div>{state.name}</div>
          {renderHelloWorld(12)}
        </div>
      )
    }
  },
})
